<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是我的第一个网页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 样式 */
        .btn {
            background-color: pink;
            font-size: 20px;
            font-weight: bolder;
            border: 1px solid #ccc
        }

        #outerBox {
            width: 100%;
            height: auto;
            background-color: #ccc;
            display: flex; 
            flex-direction: row;      
            justify-content: space-between;
        }

        .comBox{
           width: 100px;
            height: 100px;
            background-color: #33ccff;
            
        }

    </style>

</head>

<body>
    <h1>Hello Web前端你真的很简单</h1>
    <!-- 仿照鸿蒙的写法 -->
    <button style="background-color: pink;font-size:20px; font-weight: bold;" onclick="alert('你是先天编码圣体')">天赋预测</button>
    <!-- 拆分写法 UI结构 -->
    <button class="btn" onclick="test()">再次成为编程圣体</button>

    <button class="btn1">再再次成为编程圣体</button>
    <br>
    <div id="outerBox">
        <div class="comBox" id="box1"></div>
        <div class="comBox" id="box2"></div>
        <div class="comBox" id="box3"></div>
    </div>


    <script>
        // alert(1) // 阻塞html渲染
        //  script 会阻塞页面渲染
        // 逻辑拆开
        function test() {
            alert("我再次回到了编程圣体的时代")
        }
        // const test = () => {
        //     alert("我再次回到了编程圣体的时代")
        // }

        // document.querySelector(".btn1") .onclick = () => {
        //     alert("我再再次回到了编程圣体的时代")
        // }
        document.querySelector(".btn1").addEventListener("click", () => {
            alert("我再再次回到了编程圣体的时代")
        })
    </script>
</body>

</html>